/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { PureComponent } from 'react';
import { Overview, Forthe, SmsList, OrderList, Fans, AreaRanking } from '@/components/PostList';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import StandardTab from '@/components/StandardTab';
import { connect } from 'dva';
import DispatchPianqu from '@/components/_pages/Post/Area/DispatchPianqu';
import { Row, Col } from 'antd';
import { getLStorage } from '@/utils/utils';
import styles from './style.less';

@connect(({ user, list, setting }) => ({
  list,
  userInfo: user.currentUser.user_info,
  ...setting,
}))
export default class List extends PureComponent {
  constructor(props) {
    super(props);
    const { phone, inn_area_ids, area_ids } = this.props.userInfo || {};
    const cacheAreaId = getLStorage(`KB_INN_AREA_${phone}`);
    const isCompany = area_ids == '*';
    // 防止片区被关闭，导致请求带上上一个的片区ID
    const area_id = inn_area_ids.includes(cacheAreaId)
      ? cacheAreaId
      : isCompany
        ? '0'
        : inn_area_ids.join(',');

    this.state = {
      activeKey: 'overview',
      areaRankKey: undefined,
      area_id,
    };
  }

  onTabChange = (activeKey, areaRankKey) => {
    const { dispatch, list = {} } = this.props;
    const { searchFormValues = {} } = list;
    if (activeKey == 'areaRanking') {
      dispatch({
        type: 'list/save',
        payload: {
          searchFormValues: {
            ...searchFormValues,
            listType: 'areaRanking',
          },
        },
      });
    }
    this.setState({
      activeKey,
    });
    setTimeout(() => {
      this.setState({
        areaRankKey,
      });
    }, 0);
  };

  onChangePianqu = area_id => {
    // 切换id刷新Overview组件
    this.setState({
      area_id,
    });
  };

  render() {
    const { activeKey, areaRankKey, area_id } = this.state;
    const {
      userInfo,
      options: { key },
    } = this.props;
    const { inn_area_ids = [] } = userInfo;
    const isZyAccount = key === 'post';
    // 判断中邮账号是否是支局及区县，是则不显示公众号粉丝页面
    const isZyZJ = isZyAccount && (userInfo.branchLevel == 3 || userInfo.branchLevel == 4);

    const reqAreaId = area_id || inn_area_ids.join(',');

    const panes = [
      {
        tab: '总览',
        key: 'overview',
        component: <Overview onTabChange={this.onTabChange} key={reqAreaId} area_id={reqAreaId} />,
      },
      {
        tab: '出入库',
        key: 'forthe',
        component: <Forthe area_id={reqAreaId} />,
      },
      {
        tab: '短信通知',
        key: 'smsList',
        component: <SmsList area_id={reqAreaId} />,
      },
      {
        tab: '订单',
        key: 'orderList',
        component: <OrderList area_id={reqAreaId} />,
      },
    ];
    if (!isZyZJ) {
      panes.push({
        tab: '公众号粉丝',
        key: 'fans',
        component: <Fans area_id={reqAreaId} />,
      });
    }
    if (isZyAccount && userInfo.branchLevel < 4) {
      panes.push({
        tab: '区域排名',
        key: 'areaRanking',
        component: <AreaRanking activeKey="areaRanking" areaRankKey={areaRankKey} />,
      });
    }
    return (
      <PageHeaderLayout
        title={
          <Row type="flex" justify="space-between">
            <Col>下属驿站统计数据</Col>
            <Col>
              <DispatchPianqu type="inn" onChange={this.onChangePianqu} />
            </Col>
          </Row>
        }
      >
        <div className={styles.main}>
          <div style={{ paddingBottom: '24px' }}>
            <StandardTab
              style={{ marginBottom: 24 }}
              onChange={this.onTabChange}
              activeKey={activeKey}
              name="list"
              panes={panes}
            />
          </div>
        </div>
      </PageHeaderLayout>
    );
  }
}
